<template>
  <div style="width:100%;">
    <el-check-tag v-bind="$attrs" v-for="item in items" :key="item.value" :checked="modelValue==item.value" @click="doClick(item)">{{item.label}}</el-check-tag>
  </div>
</template>

<script>
import {watch, toRef} from 'vue';
export default {
    name: "MyTags",
    emits: ["update:modelValue"],
    props: {
        modelValue: [String, Number],
        title: String,
        cfg: {
            type:Object,
            default(){
                return{}
            }
        },
        formData: Object,
        pformSearch: Object, //父亲form传来的过滤条件//跟随formData一起变化
        tbname: String,
        allowEmpty: {
            type: Boolean,
            default: false,
        },
    },
    created() {
        this.val = this.modelValue;
        this.proceParenFormSearch();
    },
    data() {
        return {
            val: undefined,
            action: "",
            items: [],
            records: [],
            watchStop:null,
        };
    },
    methods: {
        loadData() {
            
            var valueField = this.cfg.valueField || "ID";
            var labelField = this.cfg.labelField || "Name";

            let moduleName = this.cfg.tbname || this.tbname;
            this.$server.list(moduleName, 1, 1000, this.cfg.search).then((res) => {
                var lst = [];
                var records = res.records || res;
                for (var ix = 0; ix < records.length; ix++) {
                    var record = records[ix];
                    var item = {
                        value: record[valueField],
                        label: record[labelField],
                    };
                    lst.push(item);
                }
                this.records = records;
                this.items = lst;
            });
        },
        proceParenFormSearch() {
            if (this.pformSearch && this.formData) {
                let nSearch = {};
                let wws = [];
                Object.keys(this.pformSearch).map((p) => {
                    let v = this.pformSearch[p];
                    if (v) {
                        let vv = toRef(this.formData, v);
                        nSearch[p] = vv;
                        wws.push(vv);
                    }
                });
                if(this.watchStop){
                    this.watchStop();
                }
                this.watchStop = watch(wws, ()=>{
                    this.loadData();
                })

                nSearch = {...this.cfg.search, ...nSearch};
                
                this.cfg.search = nSearch;
            }
            this.loadData();
        },
        onVisibleChange(val){
            if(val && this.pformSearch && this.formData){
                //值被清空的时候检查，是否上级过滤条件已变，适时重新加载过滤后数据
                let nSearch = {};
                Object.keys(this.pformSearch).map((p) => {
                    let v = this.pformSearch[p];
                    if (v) {
                        nSearch[p] = this.formData[v];
                    }
                });
                const cPSearch= JSON.stringify(nSearch);
                if(cPSearch!=this.oldPSearch){
                    this.proceParenFormSearch();
                }
            }
        },
        doClick(btn){
          this.val = btn.value;
        }
    },
    watch: {
        cfg() {
            this.proceParenFormSearch();
        },

        pformSearch(){
            this.proceParenFormSearch();
        },
        formData(){
            this.proceParenFormSearch();
        },
        modelValue(newValue) {
            this.val = newValue;
        },
        val(newValue) {
            this.$emit("update:modelValue", newValue);
            if (this.cfg.srcFields && this.cfg.destFields && this.formData) {
                let item =
                    this.records.filter(
                        (p) => p[this.cfg.valueField] == newValue
                    )[0] || {};
                let src = this.cfg.srcFields.split(",");
                let dst = this.cfg.destFields.split(",");

                let ix = src.indexOf(this.cfg.valueField);
                if (ix != -1) {
                    //如果这个值没变化，就不需要继续更新了
                    //有一种情况， 选择学生的时候，更新了班级， 班级的变化，又会导致更新学生， 因为班级里面没有学生信息，会把已经设置好的学生信息清除掉
                    let dstId = dst[ix];
                    let oldValue = this.formData[dstId];
                    if (oldValue == this.modelValue) return;
                }

                for (let ix = 0; ix < src.length; ix++) {
                    let pkey = dst[ix];
                    this.formData[pkey] = item[src[ix]];
                }
            }
        },
    },
};
</script>